<template>
  <div id="myorder">
    <NavBarTitle :NavBarTitle="NavBarTitle" />
    <van-tabs v-model="active" swipeable animated>
      <!--全部订单-->
      <van-tab title="全部订单">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <template v-for="(item1, index) in list">
              <div class="listF">
                <div @click="WaitToTRavel_(item1.id)">
                  <div class="flex between padT padTT">
                    <div>
                      <div class="flex">
                        <div class="marL">{{ item1.citysname }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.cityename }}</div>
                      </div>
                      <div class="flex" style="font-size: 13px">
                        <div class="marL">{{ item1.s_address }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.e_address }}</div>
                      </div>
                    </div>
                    <div class="marR toPay" v-if="item1.order_status == 0">
                      待支付
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 1"
                    >
                      <span v-if="item1.status == '1'">未出行(未派车)</span>
                      <span v-if="item1.status == '3'">已改签(未派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 2"
                    >
                      <span v-if="item1.status == '1'">未出行(已派车)</span>
                      <span v-if="item1.status == '3'">已改签(已派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 3"
                    >
                      已发车
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 4"
                    >
                      已完成
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '1'"
                    >
                      已失效
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '4'"
                    >
                      已退款
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 6 && item1.status == '1'"
                    >
                      检票中
                    </div>
                  </div>
                  <div class="flex between padT">
                    <div class="marL">
                      发车时间：{{ item1.day | dayChange }}
                      <span>{{ item1.hour }}开</span>
                    </div>
                    <div class="marR money">￥{{ item1.order_price }}</div>
                  </div>
                  <div class="flex between padT padB">
                    <div class="marL">总票数：{{ item1.ticketnum }}张</div>
                    <div></div>
                  </div>
                </div>
                <div class="line"></div>
                <div class="btn flex jEnd" v-if="item1.order_status == 0">
                  <van-button
                    color="#0fa0a0"
                    @click="wxPay(item1.id, index)"
                    plain
                    round
                    >立即支付
                  </van-button>
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="cancelOrder(item1.id, index)"
                      >取消订单</van-button
                    >
                  </div>
                </div>
                <div
                  class="btn flex jEnd"
                  v-if="item1.order_status == 1 || item1.order_status == 2"
                >
                  <van-button
                    color="#0fa0a0"
                    @click="showOverlay(item1.codeimg, item1.codenum)"
                    plain
                    round
                    ><span class="iconfont" style="margin-right: 2px"
                      >&#xe600;</span
                    >二维码
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="item1.ischange && item1.order_status == '1'"
                    plain
                    round
                    @click="
                      toRebook(
                        item1.s_address,
                        item1.e_address,
                        item1.sitesid,
                        item1.sitesname,
                        item1.siteeid,
                        item1.siteename,
                        item1.day,
                        item1.departuretime,
                        item1.id
                      )
                    "
                    >改签申请
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="!item1.ischange"
                    plain
                    round
                    disabled
                  >
                    <span>不能改签</span>
                  </van-button>
                  <div
                    class="cancel"
                    v-if="item1.order_status == 1 || item1.order_status == 2"
                  >
                    <van-button plain round @click="orderT(index, item1.id)"
                      >订单退款</van-button
                    >
                  </div>
                </div>
                <div class="btn flex jEnd" v-if="item1.order_status == 4">
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="
                        toBookingAgain(
                          item1.sitesid,
                          item1.sitesname,
                          item1.siteeid,
                          item1.siteename,
                          item1.day,
                          item1.id
                        )
                      "
                      >再次订票
                    </van-button>
                  </div>
                </div>
              </div>
            </template>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <!--待支付-->
      <van-tab title="待支付">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <template v-for="(item1, index) in list">
              <div class="listF">
                <div @click="WaitToTRavel_(item1.id)">
                  <div class="flex between padT padTT">
                    <div>
                      <div class="flex">
                        <div class="marL">{{ item1.citysname }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.cityename }}</div>
                      </div>
                      <div class="flex" style="font-size: 13px">
                        <div class="marL">{{ item1.s_address }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.e_address }}</div>
                      </div>
                    </div>
                    <div class="marR toPay" v-if="item1.order_status == 0">
                      待支付
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 1"
                    >
                      <span v-if="item1.status == '1'">未出行(未派车)</span>
                      <span v-if="item1.status == '3'">已改签(未派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 2"
                    >
                      <span v-if="item1.status == '1'">未出行(已派车)</span>
                      <span v-if="item1.status == '3'">已改签(已派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 3"
                    >
                      已发车
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 4"
                    >
                      已完成
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '1'"
                    >
                      已失效
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '4'"
                    >
                      已退款
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 6 && item1.status == '1'"
                    >
                      检票中
                    </div>
                  </div>
                  <div class="flex between padT">
                    <div class="marL">
                      发车时间：{{ item1.day | dayChange }}
                      <span>{{ item1.hour }}开</span>
                    </div>
                    <div class="marR money">￥{{ item1.order_price }}</div>
                  </div>
                  <div class="flex between padT padB">
                    <div class="marL">总票数：{{ item1.ticketnum }}张</div>
                    <div></div>
                  </div>
                </div>
                <div class="line"></div>
                <div class="btn flex jEnd" v-if="item1.order_status == 0">
                  <van-button
                    color="#0fa0a0"
                    @click="wxPay(item1.id, index)"
                    plain
                    round
                    >立即支付
                  </van-button>
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="cancelOrder(item1.id, index)"
                      >取消订单</van-button
                    >
                  </div>
                </div>
                <div
                  class="btn flex jEnd"
                  v-if="item1.order_status == 1 || item1.order_status == 2"
                >
                  <van-button
                    color="#0fa0a0"
                    @click="showOverlay(item1.codeimg, item1.codenum)"
                    plain
                    round
                    ><span class="iconfont" style="margin-right: 2px"
                      >&#xe600;</span
                    >二维码
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="item1.ischange && item1.order_status == '1'"
                    plain
                    round
                    @click="
                      toRebook(
                        item1.s_address,
                        item1.e_address,
                        item1.sitesid,
                        item1.sitesname,
                        item1.siteeid,
                        item1.siteename,
                        item1.day,
                        item1.departuretime,
                        item1.id
                      )
                    "
                    >改签申请
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="!item1.ischange"
                    plain
                    round
                    disabled
                  >
                    <span>不能改签</span>
                  </van-button>
                  <div
                    class="cancel"
                    v-if="item1.order_status == 1 || item1.order_status == 2"
                  >
                    <van-button plain round @click="orderT(index, item1.id)"
                      >订单退款</van-button
                    >
                  </div>
                </div>
                <div class="btn flex jEnd" v-if="item1.order_status == 4">
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="
                        toBookingAgain(
                          item1.sitesid,
                          item1.sitesname,
                          item1.siteeid,
                          item1.siteename,
                          item1.day,
                          item1.id
                        )
                      "
                      >再次订票
                    </van-button>
                  </div>
                </div>
              </div>
            </template>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <!--未出行-->
      <van-tab title="未出行">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <template v-for="(item1, index) in list">
              <div class="listF">
                <div @click="WaitToTRavel_(item1.id)">
                  <div class="flex between padT padTT">
                    <div>
                      <div class="flex">
                        <div class="marL">{{ item1.citysname }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.cityename }}</div>
                      </div>
                      <div class="flex" style="font-size: 13px">
                        <div class="marL">{{ item1.s_address }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.e_address }}</div>
                      </div>
                    </div>
                    <div class="marR toPay" v-if="item1.order_status == 0">
                      待支付
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 1"
                    >
                      <span v-if="item1.status == '1'">未出行(未派车)</span>
                      <span v-if="item1.status == '3'">已改签(未派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 2"
                    >
                      <span v-if="item1.status == '1'">未出行(已派车)</span>
                      <span v-if="item1.status == '3'">已改签(已派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 3"
                    >
                      已发车
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 4"
                    >
                      已完成
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '1'"
                    >
                      已失效
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '4'"
                    >
                      已退款
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 6 && item1.status == '1'"
                    >
                      检票中
                    </div>
                  </div>
                  <div class="flex between padT">
                    <div class="marL">
                      发车时间：{{ item1.day | dayChange }}
                      <span>{{ item1.hour }}开</span>
                    </div>
                    <div class="marR money">￥{{ item1.order_price }}</div>
                  </div>
                  <div class="flex between padT padB">
                    <div class="marL">总票数：{{ item1.ticketnum }}张</div>
                    <div></div>
                  </div>
                </div>
                <div class="line"></div>
                <div class="btn flex jEnd" v-if="item1.order_status == 0">
                  <van-button
                    color="#0fa0a0"
                    @click="wxPay(item1.id, index)"
                    plain
                    round
                    >立即支付
                  </van-button>
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="cancelOrder(item1.id, index)"
                      >取消订单</van-button
                    >
                  </div>
                </div>
                <div
                  class="btn flex jEnd"
                  v-if="item1.order_status == 1 || item1.order_status == 2"
                >
                  <van-button
                    color="#0fa0a0"
                    @click="showOverlay(item1.codeimg, item1.codenum)"
                    plain
                    round
                    ><span class="iconfont" style="margin-right: 2px"
                      >&#xe600;</span
                    >二维码
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="item1.ischange && item1.order_status == '1'"
                    plain
                    round
                    @click="
                      toRebook(
                        item1.s_address,
                        item1.e_address,
                        item1.sitesid,
                        item1.sitesname,
                        item1.siteeid,
                        item1.siteename,
                        item1.day,
                        item1.departuretime,
                        item1.id
                      )
                    "
                    >改签申请
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="!item1.ischange"
                    plain
                    round
                    disabled
                  >
                    <span>不能改签</span>
                  </van-button>
                  <div
                    class="cancel"
                    v-if="item1.order_status == 1 || item1.order_status == 2"
                  >
                    <van-button plain round @click="orderT(index, item1.id)"
                      >订单退款</van-button
                    >
                  </div>
                </div>
                <div class="btn flex jEnd" v-if="item1.order_status == 4">
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="
                        toBookingAgain(
                          item1.sitesid,
                          item1.sitesname,
                          item1.siteeid,
                          item1.siteename,
                          item1.day,
                          item1.id
                        )
                      "
                      >再次订票
                    </van-button>
                  </div>
                </div>
              </div>
            </template>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <!--已完成-->
      <van-tab title="检票中">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <template v-for="(item1, index) in list">
              <div class="listF">
                <div @click="WaitToTRavel_(item1.id)">
                  <div class="flex between padT padTT">
                    <div>
                      <div class="flex">
                        <div class="marL">{{ item1.citysname }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.cityename }}</div>
                      </div>
                      <div class="flex" style="font-size: 13px">
                        <div class="marL">{{ item1.s_address }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.e_address }}</div>
                      </div>
                    </div>
                    <div class="marR toPay" v-if="item1.order_status == 0">
                      待支付
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 1"
                    >
                      <span v-if="item1.status == '1'">未出行(未派车)</span>
                      <span v-if="item1.status == '3'">已改签(未派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 2"
                    >
                      <span v-if="item1.status == '1'">未出行(已派车)</span>
                      <span v-if="item1.status == '3'">已改签(已派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 3"
                    >
                      已发车
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 4"
                    >
                      已完成
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '1'"
                    >
                      已失效
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '4'"
                    >
                      已退款
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 6 && item1.status == '1'"
                    >
                      检票中
                    </div>
                  </div>
                  <div class="flex between padT">
                    <div class="marL">
                      发车时间：{{ item1.day | dayChange }}
                      <span>{{ item1.hour }}开</span>
                    </div>
                    <div class="marR money">￥{{ item1.order_price }}</div>
                  </div>
                  <div class="flex between padT padB">
                    <div class="marL">总票数：{{ item1.ticketnum }}张</div>
                    <div></div>
                  </div>
                </div>
                <div class="line"></div>
                <div class="btn flex jEnd" v-if="item1.order_status == 0">
                  <van-button
                    color="#0fa0a0"
                    @click="wxPay(item1.id, index)"
                    plain
                    round
                    >立即支付
                  </van-button>
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="cancelOrder(item1.id, index)"
                      >取消订单</van-button
                    >
                  </div>
                </div>
                <div
                  class="btn flex jEnd"
                  v-if="item1.order_status == 1 || item1.order_status == 2"
                >
                  <van-button
                    color="#0fa0a0"
                    @click="showOverlay(item1.codeimg, item1.codenum)"
                    plain
                    round
                    ><span class="iconfont" style="margin-right: 2px"
                      >&#xe600;</span
                    >二维码
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="item1.ischange && item1.order_status == '1'"
                    plain
                    round
                    @click="
                      toRebook(
                        item1.s_address,
                        item1.e_address,
                        item1.sitesid,
                        item1.sitesname,
                        item1.siteeid,
                        item1.siteename,
                        item1.day,
                        item1.departuretime,
                        item1.id
                      )
                    "
                    >改签申请
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="!item1.ischange"
                    plain
                    round
                    disabled
                  >
                    <span>不能改签</span>
                  </van-button>
                  <div
                    class="cancel"
                    v-if="item1.order_status == 1 || item1.order_status == 2"
                  >
                    <van-button plain round @click="orderT(index, item1.id)"
                      >订单退款</van-button
                    >
                  </div>
                </div>
                <div class="btn flex jEnd" v-if="item1.order_status == 4">
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="
                        toBookingAgain(
                          item1.sitesid,
                          item1.sitesname,
                          item1.siteeid,
                          item1.siteename,
                          item1.day,
                          item1.id
                        )
                      "
                      >再次订票
                    </van-button>
                  </div>
                </div>
              </div>
            </template>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <!--已退款-->
      <van-tab title="已退款">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <template v-for="(item1, index) in list">
              <div class="listF">
                <div @click="WaitToTRavel_(item1.id)">
                  <div class="flex between padT padTT">
                    <div>
                      <div class="flex">
                        <div class="marL">{{ item1.citysname }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.cityename }}</div>
                      </div>
                      <div class="flex" style="font-size: 13px">
                        <div class="marL">{{ item1.s_address }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.e_address }}</div>
                      </div>
                    </div>
                    <div class="marR toPay" v-if="item1.order_status == 0">
                      待支付
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 1"
                    >
                      <span v-if="item1.status == '1'">未出行(未派车)</span>
                      <span v-if="item1.status == '3'">已改签(未派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 2"
                    >
                      <span v-if="item1.status == '1'">未出行(已派车)</span>
                      <span v-if="item1.status == '3'">已改签(已派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 3"
                    >
                      已发车
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 4"
                    >
                      已完成
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '1'"
                    >
                      已失效
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '4'"
                    >
                      已退款
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 6 && item1.status == '1'"
                    >
                      检票中
                    </div>
                  </div>
                  <div class="flex between padT">
                    <div class="marL">
                      发车时间：{{ item1.day | dayChange }}
                      <span>{{ item1.hour }}开</span>
                    </div>
                    <div class="marR money">￥{{ item1.order_price }}</div>
                  </div>
                  <div class="flex between padT padB">
                    <div class="marL">总票数：{{ item1.ticketnum }}张</div>
                    <div></div>
                  </div>
                </div>
                <div class="line"></div>
                <div class="btn flex jEnd" v-if="item1.order_status == 0">
                  <van-button
                    color="#0fa0a0"
                    @click="wxPay(item1.id, index)"
                    plain
                    round
                    >立即支付
                  </van-button>
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="cancelOrder(item1.id, index)"
                      >取消订单</van-button
                    >
                  </div>
                </div>
                <div
                  class="btn flex jEnd"
                  v-if="item1.order_status == 1 || item1.order_status == 2"
                >
                  <van-button
                    color="#0fa0a0"
                    @click="showOverlay(item1.codeimg, item1.codenum)"
                    plain
                    round
                    ><span class="iconfont" style="margin-right: 2px"
                      >&#xe600;</span
                    >二维码
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="item1.ischange && item1.order_status == '1'"
                    plain
                    round
                    @click="
                      toRebook(
                        item1.s_address,
                        item1.e_address,
                        item1.sitesid,
                        item1.sitesname,
                        item1.siteeid,
                        item1.siteename,
                        item1.day,
                        item1.departuretime,
                        item1.id
                      )
                    "
                    >改签申请
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="!item1.ischange"
                    plain
                    round
                    disabled
                  >
                    <span>不能改签</span>
                  </van-button>
                  <div
                    class="cancel"
                    v-if="item1.order_status == 1 || item1.order_status == 2"
                  >
                    <van-button plain round @click="orderT(index, item1.id)"
                      >订单退款</van-button
                    >
                  </div>
                </div>
                <div class="btn flex jEnd" v-if="item1.order_status == 4">
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="
                        toBookingAgain(
                          item1.sitesid,
                          item1.sitesname,
                          item1.siteeid,
                          item1.siteename,
                          item1.day,
                          item1.id
                        )
                      "
                      >再次订票
                    </van-button>
                  </div>
                </div>
              </div>
            </template>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <!--已退款-->
      <van-tab title="已完成">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <template v-for="(item1, index) in list">
              <div class="listF">
                <div @click="WaitToTRavel_(item1.id)">
                  <div class="flex between padT padTT">
                    <div>
                      <div class="flex">
                        <div class="marL">{{ item1.citysname }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.cityename }}</div>
                      </div>
                      <div class="flex" style="font-size: 13px">
                        <div class="marL">{{ item1.s_address }}</div>
                        <div class="lineG">——</div>
                        <div class="marL">{{ item1.e_address }}</div>
                      </div>
                    </div>
                    <div class="marR toPay" v-if="item1.order_status == 0">
                      待支付
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 1"
                    >
                      <span v-if="item1.status == '1'">未出行(未派车)</span>
                      <span v-if="item1.status == '3'">已改签(未派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 2"
                    >
                      <span v-if="item1.status == '1'">未出行(已派车)</span>
                      <span v-if="item1.status == '3'">已改签(已派车)</span>
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 3"
                    >
                      已发车
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == 4"
                    >
                      已完成
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '1'"
                    >
                      已失效
                    </div>
                    <div
                      class="marR toPay Completed"
                      v-if="item1.order_status == '5' && item1.status == '4'"
                    >
                      已退款
                    </div>
                    <div
                      class="marR toPay travel"
                      v-if="item1.order_status == 6 && item1.status == '1'"
                    >
                      检票中
                    </div>
                  </div>
                  <div class="flex between padT">
                    <div class="marL">
                      发车时间：{{ item1.day | dayChange }}
                      <span>{{ item1.hour }}开</span>
                    </div>
                    <div class="marR money">￥{{ item1.order_price }}</div>
                  </div>
                  <div class="flex between padT padB">
                    <div class="marL">总票数：{{ item1.ticketnum }}张</div>
                    <div></div>
                  </div>
                </div>
                <div class="line"></div>
                <div class="btn flex jEnd" v-if="item1.order_status == 0">
                  <van-button
                    color="#0fa0a0"
                    @click="wxPay(item1.id, index)"
                    plain
                    round
                    >立即支付
                  </van-button>
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="cancelOrder(item1.id, index)"
                      >取消订单</van-button
                    >
                  </div>
                </div>
                <div
                  class="btn flex jEnd"
                  v-if="item1.order_status == 1 || item1.order_status == 2"
                >
                  <van-button
                    color="#0fa0a0"
                    @click="showOverlay(item1.codeimg, item1.codenum)"
                    plain
                    round
                    ><span class="iconfont" style="margin-right: 2px"
                      >&#xe600;</span
                    >二维码
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="item1.ischange && item1.order_status == '1'"
                    plain
                    round
                    @click="
                      toRebook(
                        item1.s_address,
                        item1.e_address,
                        item1.sitesid,
                        item1.sitesname,
                        item1.siteeid,
                        item1.siteename,
                        item1.day,
                        item1.departuretime,
                        item1.id
                      )
                    "
                    >改签申请
                  </van-button>
                  <van-button
                    color="#0fa0a0"
                    v-if="!item1.ischange"
                    plain
                    round
                    disabled
                  >
                    <span style="font-size: 12px">不能改签</span>
                  </van-button>
                  <div
                    class="cancel"
                    v-if="item1.order_status == 1 || item1.order_status == 2"
                  >
                    <van-button plain round @click="orderT(index, item1.id)"
                      >订单退款</van-button
                    >
                  </div>
                </div>
                <div class="btn flex jEnd" v-if="item1.order_status == 4">
                  <div class="cancel">
                    <van-button
                      plain
                      round
                      @click="
                        toBookingAgain(
                          item1.sitesid,
                          item1.sitesname,
                          item1.siteeid,
                          item1.siteename,
                          item1.day,
                          item1.id
                        )
                      "
                      >再次订票
                    </van-button>
                  </div>
                </div>
              </div>
            </template>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <FooterBar />
    <!--遮 罩层-->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop="show = false">
        <div class="block flex column aCenter">
          <div class="QRCodeTitle">请出示乘车二维码</div>
          <div class="QRCode_img"><img :src="codeimg" /></div>
          <div class="QRCode_sn flex aCenter jCenter">{{ codenum }}</div>
          <div class="remarks">
            温馨提示：为了更好的保护您的利益，请不要轻易将您的二维码泄露给他人
          </div>
        </div>
      </div>
    </van-overlay>
    <div class="Mask flex column aCenter" v-if="payShow">
      <img class="MaskImg" src="../../assets/img/payBg.png" />
      <div class="finishBtn">
        <van-button square type="default" @click="finishPay"
          >已完成支付宝付款</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import FooterBar from "components/FooterBar.vue";
import NavBarTitle from "components/NavBarTitle.vue";
import { Dialog } from "vant";
import { alipayorder } from "@/api/home";

export default {
  data() {
    return {
      active: 0,
      isChoise: false,
      show: false,
      NavBarTitle: "我的订单",
      list: [],
      codeimg: "",
      codenum: "",
      isLoading: false,
      dateSearch: "",
      loading: false,
      finished: false,
      refreshing: false,
      page: 0,
      type: 0,
      payShow: false,
    };
  },
  components: {
    FooterBar,
    NavBarTitle,
    [Dialog.name]: Dialog,
  },
  watch: {
    active() {
      console.log(this.active);
      if (this.active == 0) {
        this.type = 0;
        this.onRefresh();
      } else if (this.active == 1) {
        this.type = 1;
        this.onRefresh();
      } else if (this.active == 2) {
        this.type = 2;
        this.onRefresh();
      } else if (this.active == 3) {
        this.type = 6;
        this.onRefresh();
      } else if (this.active == 4) {
        this.type = 5;
        this.onRefresh();
      } else if (this.active == 5) {
        this.type = 3;
        this.onRefresh();
      }
    },
  },
  filters: {
    dayChange(val) {
      // let index=val.lastIndexOf("-");
      // let valq = val.substring(index+1,val.length);
      // // let indexD = val.indexOf(":");
      // let valh = val.substring(0,index);
      // return valh + "月" + valq + "日";
      return val;
    },
  },
  methods: {
    // 订单退款
    orderT(index, id) {
      Dialog.confirm({
        title: "确认订单退款",
        message: `<div>1、行程前12天以上，全额退款。</div><div>2、行程前6天以上，收取票款3%手续费；</div><div>3、行程前6天内(含第6天)，收取票款8%手续费；</div><div>4、行程前3天内(含第3天），收取票款15%手续费；</div><div>5、行程前24小时，收取票款40%手续费；</div>`,
        confirmButtonColor: "#0fa0a0",
      })
        .then(() => {
          let data = {
            token: this.$store.state.token,
            order_id: id,
          };
          console.log(data);
          this.$axios
            .post(
              this.$index + this.$api.order.refund,
              this.$Qs.stringify(data)
            )
            .then((res) => {
              if (res.data.flag) {
                this.$toast.success({
                  message: res.data.msg,
                  duration: 1000,
                  onClose: () => {
                    for (let i = 0; i < this.list.length; i++) {
                      if (index == i) {
                        this.list.splice(index, 1);
                      }
                    }
                  },
                });
              } else {
                this.$toast(res.data.msg);
              }
            });
        })
        .catch(() => {});
    },
    //支付成功后的自制回调
    finishPay() {
      this.payShow = false;
      if (!this.payShow) {
        this.$router.go(0);
      }
    },
    // 微信支付
    wxPay(id, index) {
      let data = {
        token: this.$store.state.token,
        id: id,
      };
      Dialog.confirm({
        title: "订单生成成功",
        message: "",
        confirmButtonText: "微信支付",
        cancelButtonText: "支付宝支付",
        confirmButtonColor: "#0fa0a0",
      })
        .then(() => {
          this.$axios
            .post(
              this.$index + this.$api.home.payorder,
              this.$Qs.stringify(data)
            )
            .then((res) => {
              console.log(res);
              if (res.data.flag) {
                this.onBridgeReady(
                  res.data.data.pay.appId,
                  res.data.data.pay.timeStamp,
                  res.data.data.pay.nonceStr,
                  res.data.data.pay.package,
                  res.data.data.pay.signType,
                  res.data.data.pay.paySign,
                  index
                );
              } else {
                this.$toast(res.data.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          alipayorder(data)
            .then((res) => {
              this.payShow = true;
              if (this.payShow) {
                location.href =
                  window.location.href +
                  "&token_user=" +
                  this.$store.state.token +
                  "&active=" +
                  this.$route.query.active +
                  "&form=" +
                  res.data.data.html;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        });
    },
    onBridgeReady(
      appId,
      timeStamp,
      nonceStr,
      package_,
      signType,
      paySign,
      index
    ) {
      console.log("进了支付方法");
      let self = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: appId, //公众号名称，由商户传入
          timeStamp: timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: nonceStr, //随机串nonceStr
          package: package_,
          signType: signType, //微信签名方式：
          paySign: paySign, //微信签名
        },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            // this.$router.replace('/myorder');
            console.log("支付成功");
            self.list.some((item, i) => {
              if (i == index) {
                self.list.splice(i, 1);
                return true;
              }
            });
          }
        }
      );
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            this.onBridgeReady(
              appId,
              timeStamp,
              nonceStr,
              package_,
              signType,
              paySign
            ),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent(
            "WeixinJSBridgeReady",
            this.onBridgeReady(
              appId,
              timeStamp,
              nonceStr,
              package_,
              signType,
              paySign
            )
          );
          document.attachEvent(
            "onWeixinJSBridgeReady",
            this.onBridgeReady(
              appId,
              timeStamp,
              nonceStr,
              package_,
              signType,
              paySign
            )
          );
        }
      } else {
        // this.onBridgeReady(appId, timeStamp, nonceStr, package_, signType, paySign);
      }
    },
    showOverlay(codeimg, codenum) {
      console.log(codeimg);
      this.codeimg = codeimg;
      this.codenum = codenum;
      if (this.codenum != "") {
        this.show = true;
      }
    },
    toRebook(s_address, e_address, sid, ssite, eid, esite, day, departuretime, id) {
      departuretime = departuretime.replace(/-/g, "/");
      let dayC = new Date(departuretime);
      let Y = dayC.getFullYear();
      let M = dayC.getMonth() + 1;
      let D = dayC.getDate();
      let date = Y + "/" + M + "/" + D;
      this.$router.push({
        path: "/Rebook",
        query: {
          s_address, 
          e_address,
          sid: sid,
          ssite: ssite,
          eid: eid,
          esite: esite,
          day: date,
          order_id: id,
        },
      });
    },
    toBookingAgain(sid, ssite, eid, esite, day, id) {
      this.$router.push({
        path: "/BookingAgain",
        query: { sid: sid, ssite: ssite, eid: eid, esite: esite, order_id: id },
      });
    },
    onRefresh() {
      this.finished = false;
      this.page = 0;
      this.list = [];
      this.loading = true;
      this.onLoad();
    },
    onLoad() {
      this.loading = true;
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.page++;
      let data = {
        token: this.$store.state.token,
        type: this.type,
        page: this.page,
        limit: 10,
      };
      this.$axios
        .post(this.$index + this.$api.order.orderlist, this.$Qs.stringify(data))
        .then((res) => {
          console.log(res);
          if (res.data.flag) {
            if (res.data.data.data.length > 0) {
              for (let i = 0; i < res.data.data.data.length; i++) {
                this.list.push(res.data.data.data[i]);
              }
              this.loading = false;
            } else if (res.data.data.data.length == 0) {
              this.finished = true;
            }
          } else {
            this.$toast(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 取消
    cancelOrder(id, index) {
      let data = {
        token: this.$store.state.token,
        id: id,
      };
      Dialog.confirm({
        title: "确认取消订单",
        confirmButtonColor: "#0fa0a0",
      })
        .then(() => {
          this.$axios
            .post(
              this.$index + this.$api.order.cancel,
              this.$Qs.stringify(data)
            )
            .then((res) => {
              console.log(res);
              if (res.data.flag) {
                this.$toast.success(res.data.msg);
                this.list.some((item, i) => {
                  if (i == index) {
                    this.list.splice(i, 1);
                    return true;
                  }
                });
              } else {
                this.$toast(res.data.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    WaitToTRavel_(id) {
      this.$router.push({ path: "/WaitToTRavel", query: { id: id } });
    },
    aliPay() {
      if (this.$route.query.form) {
        // localStorage.setItem('token_user',this.$route.query.token_user)
        var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
        var local = window.location.href; // 获取页面url
        if (
          local.indexOf("form=") != -1 &&
          ua.match(/MicroMessenger/i) != "micromessenger"
        ) {
          const form = decodeURIComponent(local.match(/form=(\S*)/)[1]);
          console.log(form);
          const div = document.createElement("div");
          div.id = "alipay";
          div.innerHTML = form;
          document.body.appendChild(div);
          console.log(document.getElementsByName("sign"));
          var sign = document
            .getElementsByName("sign")[0]
            .value.replace(/\s/g, "+");
          document.getElementsByName("sign")[0].value = sign;
          document.querySelector("#alipay").children[0].submit();
          // this.isLoading = false
        }
      }
    },
  },
  beforeMount() {
    if (this.$route.query.active) {
      this.active = parseInt(this.$route.query.active);
    }
    if (this.$route.query.token_user) {
      this.aliPay();
    }
  },
};
</script>

<style scoped>
.Mask {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
.MaskImg {
  width: 90%;
}
.finishBtn {
  margin-top: 200px;
}
.Mask /deep/ .van-button--normal {
  height: 43.5px;
  line-height: 43.5px;
  border-radius: 10px;
  padding: 0 45px;
}
/deep/ .van-tab--active {
  color: #0fa0a0;
  font-size: 14px;
}

/deep/ .van-tabs__line {
  background-color: #0fa0a0;
}

.listF {
  width: 100%;
  background-color: #ffffff;
  font-size: 14px;
  color: #333333;
  border-top: 5px solid #f2f5fa;
}

.lineG {
  width: 9px;
  margin: 0 9px 0 3px;
}

.marL {
  margin-left: 12px;
}

.marR {
  margin-right: 12px;
}

.padT {
  padding: 7px 0;
}

.padTT {
  padding-top: 14px;
}

.padB {
  padding-bottom: 14px;
}

.toPay {
  color: #ff1111;
  font-size: 13px;
}

.travel {
  color: #0fa0a0;
}

.Completed {
  color: #888888;
}

.money {
  font-size: 15px;
  color: #ff1111;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #ededed;
}

/deep/ .van-button {
  height: 33px;
  line-height: 33px;
  font-size: 13px;
  margin-left: 7px;
}

.cancel /deep/ .van-button--default {
  color: #888888;
}

.btn {
  padding: 14px 12px 10px 0;
  font-size: 12px;
}

.btn /deep/.van-button--normal {
  padding: 0 10px;
}

.QRCodeTitle {
  font-size: 16px;
  color: #333333;
  margin-top: 40px;
}

.QRCode_img {
  width: 165px;
  height: 165px;
  margin-top: 36px;
}

.QRCode_img > img {
  width: 165px;
  height: 165px;
}

.QRCode_sn {
  width: 165px;
  height: 34px;
  margin-top: 30px;
  font-size: 13px;
  color: #333333;
  background-color: #f7f7f7;
}

.remarks {
  margin-top: 19px;
  font-size: 13px;
  color: #ef5959;
  width: 247px;
  height: 38px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  line-height: 20px;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 301px;
  height: 400px;
  background-color: #fff;
  border-radius: 20px;
}
</style>